<template>
  <div class="container">
    <Add v-bind="{num}"></Add>
    <div class="row">
      <div class="col">
        <p>从1至100的所有数字分成两行，1至50按从小到大的顺序位于第一行，51至100按从大到小的顺序位于下面一行，如下图所示。高斯发现，每一列的两个数字的和都等于101，因此所有数字的总和就是50×101，等于5050。</p>
      </div>
    </div>
    <Addarray v-bind="{num}"></Addarray>
    <div class="row">
      <div class="col">
        <p>如果我们需要计算前17个、1 000个或者100万个数字的和，该怎么办呢？</p>
        <p>事实上，我们可以利用高斯的方法，计算前n个数字的和，n可以取任意值。有人可能会觉得数字过于抽象，那么我们可以结合图形来表示这个过程。如下图所示，由于1、3、6、10和15等数字可以用相应个数的小圆圈表示，这些小圆圈又可以排列成三角形，因此我们把这些数字称作“三角形数”（triangular number）。（也许你认为一个圆圈无法构成一个三角形，但1还是被视为三角形数。）根据三角形数的定义，第n个三角形数为1 + 2 + 3 + … + n。</p>
      </div>
    </div>
    <Triangular v-bind="{num: [1,2,3,4,5]}"></Triangular>
    <div class="row">
      <div class="col">
        <p>前5个三角形数是1、3、6、10和15</p>
        <p>请注意观察，如果把两个三角形并排放置，如下图所示，会出现什么样的结果呢？</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Provide, Prop } from "vue-property-decorator";
import Add from "@/components/math/add.vue";
import Addarray from "@/components/math/addarray.vue";
import Triangular from "@/components/math/triangular.vue";

@Component({
  components: {
    Add,
    Addarray,
    Triangular
  }
})
export default class BgMath extends Vue {
  created() {
    for (var i = 1; i <= 100; i++) {
      this.num.push(i);
    }
  }
  @Provide() private num: number[] = [];
  mounted(): void {}
}
</script>

<style scoped lang="scss">
.container {
  background-color: #ffffff;
}
</style>
